<!DOCTYPE html>
<html>
<head>
	<title>菜单管理</title>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

	<link href="../../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
	<link href="../../css/font-awesome.css?v=4.4.0" rel="stylesheet">
	<link href="../../css/plugins/iCheck/custom.css" rel="stylesheet">
	<link href="../../css/style.css?v=4.1.0" rel="stylesheet">
	<!-- jqgrid-->
	<link href="../../css/plugins/jqgrid/ui.jqgrid.css?0820" rel="stylesheet">
	<!-- ztree -->
	<link rel="stylesheet" href="../../js/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
	<link rel="stylesheet" href="../../css/plugins/bootstrap-table/bootstrap-table.min.css">
	<link rel="stylesheet" href="../../js/plugins/treegrid/jquery.treegrid.css">

	<script src="../../libs/jquery.min.js"></script>
	<script src="../../js/plugins/layer/layer.min.js"></script>
	<script src="../../libs/bootstrap.min.js"></script>
	<script src="../../libs/vue.min.js"></script>
	<!-- jqGrid -->
	<script src="../../js/plugins/jqgrid/i18n/grid.locale-cn.js?0820"></script>
	<script src="../../js/plugins/jqgrid/jquery.jqGrid.min.js?0820"></script>
	<script src="../../js/plugins/layer/laydate/laydate.js"></script>
	<!-- ztree -->
	<script type="text/javascript" src="../../js/zTree/js/jquery.ztree.core.js"></script>
	<script type="text/javascript" src="../../js/zTree/js/jquery.ztree.excheck.js"></script>
	<script type="text/javascript" src="../../js/zTree/js/jquery.ztree.exedit.js"></script>
	<script src="../../js/common.js"></script>

	<script src="../../libs/bootstrap-table.min.js"></script>
	<script src="../../js/plugins/treegrid/jquery.treegrid.min.js"></script>
	<script src="../../js/plugins/treegrid/jquery.treegrid.bootstrap3.js"></script>
	<script src="../../js/plugins/treegrid/jquery.treegrid.extension.js"></script>
	<script src="../../js/plugins/treegrid/tree.table.js"></script>
</head>
<body>
<div id="rrapp" v-cloak>
	<div>
		<div class="grid-btn">
			<form role="form" class="form-inline" style="text-align:right;">
			<a v-if="hasPermission('/sys/menu:save')" class="btn btn-sm btn-primary" @click="add"><i class="fa fa-plus"></i>&nbsp;新增</a>
			<a v-if="hasPermission('/sys/menu/update')" class="btn btn-sm btn-primary" @click="update"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</a>
			<a v-if="hasPermission('/sys/menu/delete')" class="btn btn-sm btn-primary" @click="del"><i class="fa fa-trash-o"></i>&nbsp;删除</a>
			</form>
		</div>
		<table id="menuTable" data-mobile-responsive="true" data-click-to-select="true">
			<thead>
			<tr>
				<th data-field="selectItem" data-checkbox="true"></th>
			</tr>
			</thead>
		</table>
	</div>

	<div id="option_list" class="modal fade" data-backdrop="static" data-keyboard="false" aria-hidden="true">
		<div class="modal-dialog">
			<div class="col-sm-12">
				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
						<h5>{{title}}</h5>
					</div>
					<div class="ibox-content">
						<form class="form-horizontal">
							<div class="form-group">
								<div class="col-sm-2 control-label">类型</div>
								<label class="radio-inline">
									<input type="radio" name="type" value="0" v-model="menu.type"/> 目录
								</label>
								<label class="radio-inline">
									<input type="radio" name="type" value="1" v-model="menu.type"/> 菜单
								</label>
								<label class="radio-inline">
									<input type="radio" name="type" value="2" v-model="menu.type"/> 按钮
								</label>
							</div>
							<div class="form-group">
								<div class="col-sm-2 control-label">菜单名称</div>
								<div class="col-sm-10">
									<input type="text" class="form-control" v-model="menu.name" placeholder="菜单名称或按钮名称"/>
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-2 control-label">上级菜单</div>
								<div class="col-sm-10">
									<input type="text" class="form-control" style="cursor:pointer;" v-model="menu.parentName" @click="menuTree" readonly="readonly" placeholder="一级菜单"/>
								</div>
							</div>
							<div v-if="menu.type == 1" class="form-group">
								<div class="col-sm-2 control-label">菜单URL</div>
								<div class="col-sm-10">
									<input type="text" class="form-control" v-model="menu.url" placeholder="菜单URL"/>
								</div>
							</div>
							<div v-if="menu.type == 1 || menu.type == 2" class="form-group">
								<div class="col-sm-2 control-label">授权标识</div>
								<div class="col-sm-10">
									<input type="text" class="form-control" v-model="menu.perms" placeholder="多个用逗号分隔，如：user:list,user:create"/>
								</div>
							</div>
							<div v-if="menu.type != 2" class="form-group">
								<div class="col-sm-2 control-label">排序号</div>
								<div class="col-sm-10">
									<input type="number" class="form-control" v-model="menu.orderNum" placeholder="排序号"/>
								</div>
							</div>
							<div v-if="menu.type != 2" class="form-group">
								<div class="col-sm-2 control-label">图标</div>
								<div class="col-sm-10">
									<input type="text" class="form-control" v-model="menu.icon" placeholder="菜单图标"/>
									<code style="margin-top:4px;display: block;">获取图标：http://fontawesome.io/icons/</code>
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-2 control-label"></div>
								<input type="button" class="btn btn-primary" @click="saveOrUpdate" value="确定"/>
								<!--&nbsp;&nbsp;<input type="button" class="btn btn-warning" @click="reload" value="返回"/>-->
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- 选择菜单 -->
<div id="menuLayer" style="display: none;padding:10px;">
	<ul id="menuTree" class="ztree"></ul>
</div>

<script src="../../js/modules/sys/menu.js"></script>
</body>
</html>